<template>
  <div class="city_body">
    <Loading v-if="isLoading" />
    <Scroller v-else ref="city_List">
      <div>
        <div class="city_list">
          <div class="city_hot">
            <h2>热门城市</h2>
            <ul class="clearfix">
              <li v-for="item in hotList" :key="item.id" @click="handleToCity(item.nm,item.id)">{{ item.nm }}</li>
            </ul>
          </div>
          <div class="city_sort" ref="citySort">
            <div v-for="item in cityList" :key="item.index">
              <h2>{{ item.index }}</h2>
              <ul>
                <li v-for="itemList in item.list" :key="itemList.id" @click="handleToCity(itemList.nm,itemList.id)">
                  {{ itemList.nm }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </Scroller>
    <div class="city_index">
      <ul>
        <li
          v-for="(item, index) in cityList"
          :key="item.index"
          @touchstart="handleToIndex(index)"
        >
          {{ item.index }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "City",
  data() {
    return {
      cityList: [],
      hotList: [],
      isLoading: true,
    };
  },
  mounted() {
    var cityList = window.localStorage.getItem("cityList");
    var hotList = window.localStorage.getItem("hotList");
    if (cityList && hotList) {
        this.cityList = JSON.parse(cityList);
        this.hotList = JSON.parse(hotList);
        this.isLoading = false;
    } 
    else {
      this.axios.get("/ajax/dianying/cities.json").then((res) => {
        var msg = res.statusText;
        if (msg == "OK") {
          var cities = res.data.cts;
          var { cityList, hotList } = this.formatCityList(cities);
          this.cityList = cityList;
          this.hotList = hotList;
          this.isLoading = false;
          window.localStorage.setItem("cityList", JSON.stringify(cityList));
          window.localStorage.setItem("hotList", JSON.stringify(hotList));
        }
      });
    }
  },
  methods: {
    formatCityList(cities) {
      var cityList = [];
      var hotList = [];
      for (let i = 0; i < cities.length; i++) {
        if (i < 10) {
          hotList.push(cities[i]);
        }
        var firstLetter = cities[i].py.substring(0, 1).toUpperCase();
        if (toCom(firstLetter)) {
          //新添加
          cityList.push({ index: firstLetter, list: [cities[i]] });
        } else {
          //累加
          for (var j = 0; j < cityList.length; j++) {
            if (firstLetter === cityList[j].index) {
              cityList[j].list.push(cities[i]);
            }
          }
        }
      }
      function toCom(firstLetter) {
        for (let i = 0; i < cityList.length; i++) {
          if (cityList[i].index === firstLetter) return false;
        }
        return true;
      }
      cityList.sort((n1, n2) => {
        if (n1.index > n2.index) return 1;
        else return -1;
      });
      return {
        cityList,
        hotList,
      };
    },
    handleToIndex(index) {
      var h2 = this.$refs.citySort.getElementsByTagName("h2");
      this.$refs.city_List.toScrollTop(-h2[index].offsetTop);
    },
    handleToCity(nm,id){
        this.$store.commit('city/CITY_INFO',{nm,id});
        window.localStorage.setItem('nowNm',nm);
        window.localStorage.setItem('nowId',id);
        this.$router.push('/movie');
    }
  },
};
</script>

<style scoped lang="scss">
.city_body {
  display: flex;
  margin-top: 45px;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  .city_list {
    flex: 1;
    background: #fff5f0;
    overflow: auto;
    .city_hot {
      margin-top: 20px;
      h2 {
        padding-left: 15px;
        line-height: 30px;
        font-size: 14px;
        background: #f0f0f0;
        font-weight: normal;
      }
      ul {
        li {
          float: left;
          margin-top: 15px;
          margin-left: 3%;
          padding: 0 4px;
          width: 29%;
          height: 33px;
          background: #fff;
          text-align: center;
          line-height: 33px;
          border: 1px solid #e6e6e6;
          border-radius: 3px;
          box-sizing: border-box;
        }
      }
    }
    .city_sort {
      div {
        margin-top: 20px;
        h2 {
          padding-left: 15px;
          line-height: 30px;
          font-size: 14px;
          background: #f0f0f0;
          font-weight: normal;
        }
        ul {
          margin-top: 10px;
          padding-left: 10px;
          li {
            line-height: 30px;
          }
        }
      }
    }
  }
  .city_index {
    font-size: 14px;
    display: flex;
    width: 20px;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    border-left: 1px #e6e6e6 solid;
  }
}
</style>